﻿

  <?php
    if(Extension_Loaded('zlib'))
        Ob_Start('ob_gzhandler');
    header("Content-Type:text/html;charset=utf-8");
?>
<!DOCTYPE html>
<html>
<head>
<!-- HTML5小游戏 增强版 - BlackGlory
https://www.blackglory.me/html5-game-enhanced-version/
-->
    <title>♂</title>
    <meta name="full-screen" content="yes">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="Author" content="BlackGlory"/>
    <style>
        body{
            position:fixed;
            top:50%;
            margin:-213px 0 0 0;
            padding:0;
            width:100%;
            height:326px;
            color:white;
            text-align:center;
            background:black;
            text-shadow:0 0 0px white;
        }
        canvas,p{
            -webkit-tap-highlight-color:transparent;
            background:black;
            margin:0 auto;
        }
    </style>
    <script>
        var canvas,ctx;
        var matrix=[[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1],[1,1,1,1,1]];
        var matrix_string=matrix.toString();
        var win=[[5,5,5,5,5],[5,5,5,5,5],[5,5,5,5,5],[5,5,5,5,5],[5,5,5,5,5]];
        var win_string=win.toString();
        var padding=50;
        var box_size=30,box_border=3;
        var x=2,y=2;
        var left_top=padding,right_bottom=4*40+padding+box_size;
        var Key={
            Left:37,
            Up:38,
            Right:39,
            Down:40,
            Enter:13
        };
        var Color={
            Red:1,
            Blue:2,
            Green:3,
            Yellow:4,
            White:5,
            Box:{
                1:{
                    Background:'#FCBCB5',
                    Border:'#C97769'
                },
                2:{
                    Background:'#A7C6E8',
                    Border:'#7CABD5'
                },
                3:{
                    Background:'#C4DEC1',
                    Border:'#96C369'
                },
                4:{
                    Background:'#FCEB54',
                    Border:'#F7D310'
                },
                5:{
                    Background:'#C3C3C3',
                    Border:'#F9F9F9'
                }
            },
            Selected:{
                Background:'#CCCDCE',
                Border:'#E8E9E7'
            }
        };
        function changeColor(c){
            return c<Color.White?c+1:Color.Red;
        }
        function changeMatrix(){
            var sx=x,sy=y;
            matrix[sx][sy]=changeColor(matrix[sx][sy]);
            if(sx>0)matrix[sx-1][sy]=changeColor(matrix[sx-1][sy]);
            if(sx<4)matrix[sx+1][sy]=changeColor(matrix[sx+1][sy]);
            if(sy>0)matrix[sx][sy-1]=changeColor(matrix[sx][sy-1]);
            if(sy<4)matrix[sx][sy+1]=changeColor(matrix[sx][sy+1]);
        }
        function drawSelected(){
            var x_left=padding+x*40-3,x_right=padding+x*40+box_size-4;
            var y_top=padding+y*40-3,y_bottom=padding+y*40+box_size-4;
            var background=Color.Selected.Background;
            var border=Color.Selected.Border;
            ctx.fillStyle=border;
            ctx.fillRect(x_left,y_top,7,7);
            ctx.fillRect(x_right,y_top,7,7);
            ctx.fillRect(x_left,y_bottom,7,7);
            ctx.fillRect(x_right,y_bottom,7,7);
            ctx.fillStyle=background;
            ctx.fillRect(x_left+2,y_top+2,3,3);
            ctx.fillRect(x_right+2,y_top+2,3,3);
            ctx.fillRect(x_left+2,y_bottom+2,3,3);
            ctx.fillRect(x_right+2,y_bottom+2,3,3);
        }
        function drawBox(color,x,y){
            var background=Color.Box[color].Background;
            var border=Color.Box[color].Border;
            x=x*40+padding;
            y=y*40+padding;
            ctx.shadowBlur=10;
            ctx.shadowColor=border;
            ctx.fillStyle=background;
            ctx.fillRect(x,y,box_size,box_size);
            ctx.fillStyle=border;
            x+=box_border;y+=box_border;
            ctx.fillRect(x,y,box_size-2*box_border,box_size-2*box_border);
            ctx.fillStyle=background;
            x+=box_border;y+=box_border;
            ctx.fillRect(x,y,box_size-4*box_border,box_size-4*box_border);
            ctx.shadowBlur=0;
        }
        function draw(){
            ctx.clearRect(0,0,300,300);
            drawSelected();
            for(var x=0;x<5;x++){
                for(var y=0;y<5;y++){
                    drawBox(matrix[x][y],x,y);
                }
            }
        }
        function checkMatrix(){
            if(matrix_string===win_string){
                draw();
                alert("( ゜- ゜)つロ  乾杯~");
                window.location="http://www.bilibili.tv/video/av335864/";
            }
        }
        function getLocation(value){
            if(value<=0*40+padding+box_size){
                return 1;
            }else if(value>=1*40+padding && value<=1*40+padding+box_size){
                return 2;
            }else if(value>=2*40+padding && value<=2*40+padding+box_size){
                return 3;
            }else if(value>=3*40+padding && value<=3*40+padding+box_size){
                return 4;
            }else if(value>=4*40+padding && value<=4*40+padding+box_size){
                return 5;
            }
            return 0;
        }
        window.onload=function(){
            canvas=document.getElementById('canvas');
            ctx=canvas.getContext('2d');
            ctx.shadowOffsetX=0;
            ctx.shadowOffsetY=0;
            setTimeout(draw,0);
            document.onkeydown=function(e){
                switch(e.keyCode){
                    case Key.Left:
                        if(x>0)x--;
                        setTimeout(draw,0);
                        break;
                    case Key.Right:
                        if(x<4)x++;
                        setTimeout(draw,0);
                        break;
                    case Key.Up:
                        if(y>0)y--;
                        setTimeout(draw,0);
                        break;
                    case Key.Down:
                        if(y<4)y++;
                        setTimeout(draw,0);
                        break;
                    case Key.Enter:
                        setTimeout(draw,0);
                        changeMatrix();
                        checkMatrix();
                        break;
                }
            };
            canvas.onclick=function(e){
                var o={x:e.offsetX,y:e.offsetY};
                if(o.x>=left_top && o.x<=right_bottom && o.y>=left_top && o.y<=right_bottom){
                    var tx=getLocation(o.x);
                    var ty=getLocation(o.y);
                    if(tx && ty){
                        x=tx-1;
                        y=ty-1;
                        setTimeout(draw,0);
                        changeMatrix();
                        checkMatrix();
                    }
                }
            };
        };
    </script>
</head>
<body scroll="no" scrolling="false" onselectstart="return false;">
    <canvas id="canvas" width="290px" height="290px">
        <p>浏览器都旧得发霉啦!</p>
        <p>电脑请使用Chrome,Firefox,Opera访问</p>
        <p>手机请使用UC,Opera Mobile访问</p>
    </canvas>
    <p>方向键控制+回车键翻转/鼠标点击</p>
    <p>将所有格子变为灰白即可通关</p>
	
<div style="color:black;">
<p>
之前看到别人(https://www.blackglory.me/)做了个一个基于HTML5的小游戏,这是一个熄灯游戏,难度比较高.

游戏在这里:http://blackglory.github.io/Demo/HTML5/LightsOut.html

3个月来,他四处传播这个地址,仍然没人通关并告知他.

所以,最终决定…

在这里放出攻略:

这里放出这个是为了大家更好的娱乐一下.

由Owen公布的攻略: 四个角上各点一次，每条边第二格与第四格各点四次，内圈 3*3 的角上各点四次，内圈每条边中点点一次
</p>
</div>
</body>
</html>